<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .img {
            border-radius: 10px;
            object-fit: cover;
        }

        .img:hover {
            transform: rotate3d(1, 1, 1, 45deg) scale(1.3);
            transition: all 1s;
        }
    </style>
</head>

<body>
    <div id="root"></div>
    <script src="./sdk/react.development.js"></script>
    <script src="./sdk/react-dom.development.js"></script>
    <script src="./sdk/babel.min.js"></script>
    <script type="text/babel">
        class Image extends React.Component {
            constructor(props) {
                super(props);
                setTimeout(() => {
                    console.log(this)
                }, 1000);
            }
            render() {
                return <img className="img" src={this.props.url} style={{ width: '200px', height: '200px' }} />
            }
        }
        class App extends React.Component {
            imgs = [
                'https://am.zdmimg.com/202502/18/67b4758901b324595.jpg_e1080.jpg',
                'https://img2.baidu.com/it/u=2795281972,799143234&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=504',
                'https://q8.itc.cn/images01/20250120/47bb4ab78901465f9866ce62d66586f2.jpeg',
                'https://i1.hdslb.com/bfs/archive/b08fa934082a489f3e5f3d6f5991a09122f0b355.jpg',
                'https://pic.rmb.bdstatic.com/bjh/250209/dump/a031020b75cccfbbf772e5c5b9f4c60f.jpeg',
                'https://i2.hdslb.com/bfs/archive/6e9f76fe3cc9aed107587aecd5e0c8602c68f1b1.jpg'
            ]
            render() {
                return <div>
                    <h1>《哪吒2魔童闹海》</h1>
                    <div className='container'>
                        {this.imgs.map((url, index) => <Image key={index} url={url} />)}
                    </div>
                </div>
            }
        }
        ReactDOM.render(<App />, document.getElementById('root'))
    </script>
</body>

</html>